jQuery — Event Data and Propagation

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

event.metaKey

We can check whether the meta key is pressed when an event is fired with the event.metaKey property.

In Windows, the meta key is the Windows key.

In macOS, the meta key is the command key.

For example, if we have:

<button value="Test" name="Test" id="checkMetaKey">Click me!</button>

Then we can check if the meta key is pressed when we click on the click me button by writing:

$("#checkMetaKey").click(function(event) {
  console.log(event.metaKey);
});

event.namespace

We can get the namespace of the event by using the event.namespace property.

For example, if we have:

<button>display event.namespace</button>
<p>

</p>

Then we can trigger an event with a namespace by writing:

$("p").on("test.something", function(event) {
  alert(event.namespace);
});
$("button").click(function(event) {
  $("p").trigger("test.something");
});

We trigger the test.something event on thr p element when we click on a button.

Then event.namespace should be something and that’s displayed in the alert.

event.pageX and event.pageY

We can get the x and y-coordinates of the mouse position relative to the left edge of the document with the event.pageX and event.pageY properties respectively.

For example, we can log the mouse coordinate as the mouse moves by writing HTML:

<div id="log"></div>

and JavaScript:

$(document).on("mousemove", function({
  pageX,
  pageY
}) {
  $("#log").text(`${pageX}, ${pageY}`);
});

We listen to the mousemove event and get the pageX and pageY properties from the event object.

event.preventDefault()

We call the event.preventDefault() method to prevent the default action from being run in our event.

For example, if we have:

<a href='https://google.com'>hello</a>Then

Then we can prevent users from going to https://google.com by writing:

$("a").click(function(event) {
  event.preventDefault();
});

event.relatedTarget

The event.relatedTarget property gets the other DOM elements involved in an event.

For example, if we have:

<div>
  <a href='https://google.com'>hello</a>
</div>

Then when we move the mouse of of the a element, we can get the element that the mouse moved to with this property:

$("a").mouseout(function(event) {
  alert(event.relatedTarget.nodeName);
});

We should see DIV in the alert since the mouse moved to the div.

event.result

The event.result property returns the last value returned by an event handler that’s triggered by the event.

For example, if we have:

<button>display event.result</button>

Then we can return a value in a click listener function and get its value with event.result :

$("button").click(function(event) {
  return "hello";
});
$("button").click(function(event) {
  console.log(event.result);
});

We return 'hello' in the first click listener.

Then we log event.result in the 2nd click listener.

It should log 'hello' since that’s the return value of the first click listener.

event.stopImmediatePropagation()

We can call the event.stopImmediatePropagation() method to stop event propagation.

For example, if we have the following HTML:

<p>paragraph</p>
<div>division</div>

and CSS:

p {
   height: 30px;
   width: 150px;
   background-color: #ccf;
}

div {
   height: 30px;
   width: 150px;
   background-color: #cfc;
}

Then we can call stopImmediatePropagation to stop the propagation of the click event trigger on the p by writing:

$("p").click(function(event) {
  event.stopImmediatePropagation();
});
$("p").click(function(event) {
  $(this).css("background-color", "#f00");
});
$("div").click(function(event) {
  $(this).css("background-color", "#f00");
});

event.stopImmediatePropagation() is called on the first click listener, so the 2nd one won’t run.

The div ‘s click listener isn’t affected.

Conclusion

We can check is the meta key is pressed, stop propagation of events, and get event data with jQuery.